import shop from "../views/shopping.module.css"; //导入样式
import React, { useState, useEffect } from "react";
import { Tabs, ActionBar } from "react-vant";
import { Swiper, Toast } from "antd-mobile";
import { useLocation } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { CartO, WapHomeO } from "@react-vant/icons";
import { etail } from "../api/etails";
export default function Details(props) {
  const items = ["商品", "详情", "评价"];
  let { state } = useLocation();
  let navigate = useNavigate();
  const [love_shop, setshop] = useState(null);
  const colors = ["#ace0ff", "#bcffbd", "#e4fabd", "#ffcfac"];
  console.log(state.id);
  // 请求商品详情接口数据

  useEffect(() => {
    etail({
      id: state.id,
    }).then((res) => {
      console.log(res, "商品详情数据");
      setshop(res.data);
    });
  }, []);
  const itemss = colors.map((color, index) => (
    <Swiper.Item key={index}>
      <div
        className={shop.content}
        style={{ background: color }}
        onClick={() => {
          Toast.show(`你点击了卡片 ${index + 1}`);
        }}
      >
        {index + 1}
      </div>
    </Swiper.Item>
  ));
  if (love_shop) {
    console.log(love_shop, "111 ");
    return (
      <div className={shop.sbody}>
        {/* 标头 */}
        <div className={shop.shop_title}>
          <div className={shop.shop_return} onClick={() => navigate("/Home")}>
            <img src={require("../assets/返回 (1).png")} alt="" />
          </div>
          <div className={shop.shop_tabs}>
            <Tabs defaultActive={0}>
              {items.map((item) => (
                <Tabs.TabPane key={item} title={`${item}`}>
                  {/* 下划线标签页 */}
                </Tabs.TabPane>
              ))}
            </Tabs>
          </div>
          <div className={shop.shop_fe}>
            <img src={require("../assets/分享.png")} alt="" />
          </div>
        </div>

        {/* 商品轮播图 */}
        <div className={shop.shop_banner}>
          {/* 商品轮播 */}
          {/* <img
            src={require("../assets/F1DF18154E54FBEDCBEF307E3777AC11.jpg")}
            alt=""
          /> */}

          <Swiper
            className={shop.shop_banner}
            loop
            autoplay
            onIndexChange={(i) => {
              console.log(i, "onIndexChange1");
            }}
          >
            {love_shop?.banners.map((item) => (
              <Swiper.Item key={item}>
                <img src={item} alt="" />
              </Swiper.Item>
            ))}
          </Swiper>

          {/* 商品介绍以及价格 */}
          <div className={shop.shop_banner_title}>
            <p>{love_shop.name}</p>
            <p className={shop.shop_red}>
              {love_shop.price}
              <s className={shop.shop_gray}>{love_shop.price}</s>
            </p>
          </div>
        </div>
        {/* 详情图片 */}
        <div className={shop.shop_banner_xiang}>
          <img src={love_shop.imgs} alt="" />
        </div>
        <div className={shop.bottom}></div>
        {/* 底部导航 */}
        <ActionBar>
          <ActionBar.Icon icon={<WapHomeO />} text="首页" />
          <ActionBar.Icon icon={<CartO />} text="购物车" />
          <ActionBar.Button color="#E0AF75" type="warning" text="加入购物车" />
          <ActionBar.Button color="#FA1E32" type="danger" text="立即购买" />
        </ActionBar>
      </div>
    );
  }
}
